<template>
  <div>

<myheader></myheader>


	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
						<img class="img-fluid" :src="mysrc">
					</div>
					<div class="product-thumbnails"><a href="#">
						<img @click="changeimg('白色衬衫长发清纯美女4k.jpg')" class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a></div>
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
					<h2 class="mb-3 mt-0">{{info.name}}</h2>
					<p class="lead mt-2 mb-3 primary-color">${{info.price}}</p>
          颜色：{{param.color}} <br>
          大小：{{param.size}} <br>
          季节：{{param.season}} <br>
					<h5 class="mt-4">Description</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis velit vestibulum massa sollicitudin auctor. Cras ac venenatis orci. Ut consequat, purus ut ultrices ultricies, nisi sem ornare quam, sed ultricies mi nisl sit amet purus.</p>
					<p>Suspendisse potenti. Nunc in libero luctus, sagittis leo sit amet, volutpat lacus. Quisque a porta risus. Integer aliquet nibh vitae vestibulum accumsan</p>
					<h5 class="mt-5">Care Instructions</h5>
					<p>Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>

					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->

					<a href="#" class="btn btn-full-width btn-lg btn-outline-primary">Add to cart</a></div>

          <div v-show="uid">
						<!-- 商品评论 -->
						<textarea rows="5" v-model="comment" v-autosize >

						</textarea>
						<Button color ='blue' @click="submit">提交评论</Button>
					</div>
					<div>
						<!-- 评论区块 -->
						<!-- <ul>
							<li v-for=" i in comments">
								<span v-for="uitem in users" v-if='uitem.id ==i.uid'>
									{{uitem.username}}
								</span>
								：{{i.content}}
								</li>
						</ul> -->
						<ul>
							<li v-for="i in comments">
								{{i.username}}：
								{{i.content}}
							</li>
						</ul>
					</div>
			</div>
		</div>
	</section>

	<div class="divider"></div>

	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
				<div class="row">
					<div v-for="item in goods_list" class="col-sm-6 col-md-3 col-product">
						<figure>

							<img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/'+item.img" 	width="240" height="240">

							<figcaption>

								<div class="thumb-overlay"><a :href="'http://localhost:8080/item/?id='+item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
								<Button color='blue' @click="into" class="video_button">画中画模式</Button>
							</figcaption>
						</figure>
						<h4><a :href="'http://localhost:8080/item/?id='+item.id">{{item.name}}</a></h4>
						<p><span class="emphasis">${{item.price}}.00</span></p>
					</div>
				</div>
				<div class="page_button">
					<Pagination  v-model="pagination" @change="currentChange" layout="pager" small></Pagination>
				</div>
		</div>
	</section>

	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>


	</footer>

  </div>

</template>



<script>

import myheader from './myheader';

export default {
  data () {
    return {
      msg: "这是一个变量",
      //商品id
      id:'',
      //商品信息
      info:{},
      //商品规格  json串
      param:{},
      //商品图片
      mysrc:'',
    }
  },
   //注册组件标签
      components:{
          'myheader': myheader,
      },
  mounted:function(){
    // 获取商品ID
    this.id = this.$route.query.id;
    // console.log(this.id)


    this.get_good();


   this.get_goods_info();
   this.get_comment()

},
  methods:{
    //获取评论
	get_comment(){
		this.axios.get('http://127.0.0.1:8000/commentinsert/',{
			params:{gid:this.id}
		}).then(res=>{
			console.log(res.data)
			this.comments=res.data.data
			// this.users=res.data.udata
		})
	},
	// 提交评论
	submit(){
		if(this.comment==''){
			this.$Message('评论不能为空')
			return false
		}
		this.comment=this.comment.replace(/ /g,"")
		if(this.comment.length>100){
			this.$Message('超过长度限制')
			return false
		}
		// 请求入库
		// qs.stringify 将参数转为url参数
		var data=this.qs.stringify({
			username:localStorage.getItem('username'),
			gid:this.id,
			content :this.comment})
		console.log(data)
		this.axios.post('http://127.0.0.1:8000/commentinsert/',data).then(res=>{
			console.log(res.data)
			this.comments.unshift({'username':localStorage.getItem('username'),'content':this.comment,'gid':this.id})
			console.log(this.comments)
			this.$Message(res.data.msg)
		})

	},
	  //切换页数
	currentChange(value) {
	  console.log(value.cur, value.size);
	  	this.pagination.page=value.cur
		this.get_goods()
    },
	change_img(imgname){
		this.mysrc= 'http://localhost:8000/static/upload/'+imgname
		console.log(this.mysrc)
	},
	  	//画中画
    into:function(){
        var video =document.getElementById('video')
        if (video !== document.pictureInPictureElement) {
          // 尝试进入画中画模式
          video.requestPictureInPicture();
          this.mymsg = '退出画中画';
          } else {
          // 退出画中画
          document.exitPictureInPicture();
          this.mymsg = '进入画中画';
        }
    },
	//获取商品详情
	get_goods_info(){
		this.axios.get('http://127.0.0.1:8000/goodinfo/',{
			params:{id:this.id}
		}).then(res=>{
			console.log(res.data)
			this.info= res.data.data
			//类型转换
			this.param = JSON.parse(res.data.data.params)
			this.info_imgs = res.data.info_imgs
			this.info_video = res.data.info_video
			this.mysrc = 'http://localhost:8000/static/upload/'+res.data.data.img

		})
	},


    //更换大图
    changeimg:function(img){
      console.log(img)
      this.mysrc = 'http://127.0.0.1:8000/static/upload/'+ img;
    },

    //获取商品
    get_good: function () {

          //发送请求
          this.axios.get('http://localhost:8000/goodinfo/', {params:{id:this.id}}).then((result) => {
            // console.log(result.data);
            this.info = result.data;

            //类型转换
            this.param = JSON.parse(this.info.params);
            // console.log(this.param)

            //给图片地址复制
            this.mysrc = 'http://127.0.0.1:8000/static/upload/'+ this.info.img;

          });

        },

  }
}


</script>

<style>

.img-fluid{
  cursor: pointer;
}

</style>
